Before we begin describing how style sheets work, and how you use them, we should first answer the simple question, "what is a style sheet?"
You don't need to know what we discuss in this section to work with style sheets, but for completeness sake, you might like to spend a few minutes reading it. If not, and you are ready to jump right in, you can move on now.
A couple of details about where CSS comes from. The World Wide Web Consortium or W3C is a kind of United Nations of the web. By working with major stakeholders in the web (among them browser developers), W3C makes recommendations. You might like to think of these as standards for the web.
In the area of style sheets there are three W3C recommendations, which we saw in the last section
So, what are these recommendations? Each of the above defines a simple grammar or language. The grammar defines what types of statement can be made within a style sheet.
A style sheet is simply a text file, with the .css suffix, which is written according to the grammar defined in the various recommendations.
Here is a simple example.
BODY
{font-family: verdana, "minion web", helvetica, sans-serif;
font-size: 1em;
text-align: justify}
H1
{font-family: verdana, sans-serif;
font-size: 1.3em}
CODE
{font-family: courier, sans-serif;
font-size: 1em}
.more
{background-color: #003333;
border-width: thin;
border-color: black;
border-style: ridge;
color: white;
font-family: verdana, geneva, sans-serif;
font-size: .9em;
vertical-align: text-bottom}
Unlike an HTML document, you don't need a special declaration at the top of the file to say that this is a style sheet. And the file is just a simple text file. You should end style sheet file names with a .css suffix, (not even that is absolutely necessary with most browsers, but do it anyway).
In addition to being in .css files, style sheets can also be embedded into the HEAD of HTML files. Later we'll take a closer look at linking and embedding style sheets, how to do it, what the difference is, and which is better.
What matters is that the text (code) conforms to the correct grammar.
In this part we found out exactly what a style sheets is. It is simply a text based code that conforms to a specific grammar, saved as a text file with a .css suffix
Next up, we look at what all the fuss is about, asking "why do we need style sheets?"
|
|
|
|